<template>
  <div>
    <el-breadcrumb class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>账号中心</el-breadcrumb-item>
      <el-breadcrumb-item>求职者账号</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form :inline="true" v-model="user" class="demo-form-inline" style="margin-top: 20px">
      <el-form-item label="用户名">
        <el-input v-model="user.userName" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="目标职位">
        <el-input v-model="user.jobClassify" placeholder="目标职位"></el-input>
      </el-form-item>
      <el-form-item label="工作经验">
        <el-select v-model="user.workExp" placeholder="请选择工作经验">
          <el-option label="全部" value=""></el-option>
          <el-option label="在校" value="在校"></el-option>
          <el-option label="应届生" value="应届生"></el-option>
          <el-option label="1年以内" value="1年以内"></el-option>
          <el-option label="1-3年" value="1-3年"></el-option>
          <el-option label="3-5年" value="3-5年"></el-option>
          <el-option label="5年之上" value="5年之上"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getUserList()">查询</el-button>
      </el-form-item>

      <el-table
              v-loading="loading"
              :data="pageInfo.list"
              style="width: 100%"
              :stripe=true
              :border=true
              height="450">
        <el-table-column
                prop="userName"
                label="user用户名"
                width="150">
        </el-table-column>
        <el-table-column
                prop="jobClassify"
                label="工作方向"
                width="300">
        </el-table-column>
        <el-table-column
                prop="workExp"
                label="工作经验"
                width="120">
        </el-table-column>
        <el-table-column
                label="注册时间"
                width="220">
          <template slot-scope="scope">
            <span >{{ makeDate(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div style="float: right">
      <el-pagination
              background
              layout="prev, pager, next"
              :total="pageInfo.total"
              :page-size="pageInfo.pageSize"
              @current-change="handlePage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {makeSimpleDate,makeDate} from "../../../common/js/dateformat"
  export default {
    name: "admin-user-account",
    data(){
      return{
        pageIndex:1,
        user:{
          userName:'',
          jobClassify:'',
          workExp:'',
        },
        pageInfo:{}
      }
    },
    created(){
      this.getUserList()
    },
    methods:{
      getUserList(){
        this.loading=true;
        this.$ajax.post(this.$config.url + `user/selUserList/${this.pageIndex}`,this.user
        ).then(res => {
          this.pageInfo = res.data;
          this.loading = false;
        }).finally(() => {
        })
      },

      makeSimpleDate(date) {
        return makeSimpleDate(date)
      },
      makeDate(date){
        return makeDate(date)
      },
      handlePage(val) {
        //console.log(val)
        this.pageIndex = val
        //加载数据
        this.getUserList()
      },
    }

  }
</script>

<style scoped>

</style>